<template>
  <div>
    <a-card v-for="(item, index) in userLoginAttempts" :key="index">
      <a-row :gutter="8">
        <a-col :span="3">
          <label>{{ l('LoginState') }}</label>
        </a-col>

        <a-col :span="10">
          <a-badge v-if="item.result == 'Success'" :text="l('Success')" status="success" />
          <a-badge v-if="item.result != 'Success'" :text="l('Failed')" status="error" />
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="3">
          <label>{{ l('IpAddress') }}:</label>
        </a-col>
        <a-col :span="10">{{ item.clientIpAddress }}</a-col>
      </a-row>

      <a-row :gutter="8">
        <a-col :span="3">
          <label>{{ l('Client') }}:</label>
        </a-col>
        <a-col :span="10">{{ item.clientName }}</a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="3">
          <label>{{ l('Browser') }}:</label>
        </a-col>
        <a-col :span="10">{{ item.browserInfo }}</a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="3">
          <label>{{ l('Time') }}:</label>
        </a-col>
        <a-col :span="10">{{ getLoginAttemptTime(item) }}</a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { UserLoginAttemptDto, UserLoginServiceProxy } from '/@/shared/service-proxies';
  import { AppComponentBase } from '/@/shared/component-base';
  export default defineComponent({
    name: 'login-attempts',
    mixins: [AppComponentBase],
    data() {
      return {
        userLoginService: new UserLoginServiceProxy(),
        userLoginAttempts: [] as UserLoginAttemptDto[],
      };
    },
    mounted() {
      this.getLoginAttempts();
    },
    methods: {
      /** 获取登录足迹 */
      getLoginAttempts() {
        this.userLoginService.getRecentUserLoginAttempts().then((result) => {
          this.userLoginAttempts = result.items as any;
        });
      },
      getLoginAttemptTime(userLoginAttempt: UserLoginAttemptDto): string {
        return (
          this._momentFromNow(userLoginAttempt.creationTime) +
          ' (' +
          this._moment(userLoginAttempt.creationTime) +
          ')'
        );
      },
    },
  });
</script>
